<template>
	<section class="vbox">
		<section class="scrollable padder w-f-md">
			<section class="panel panel-default m-t-sm">
				<header class="panel-heading bg-light">
					图书
					<ul class="nav nav-tabs pull-right">
						<li class="active"><a href="#book-info" data-toggle="tab"><i class="fa fa-book text-success-dk"></i> 基础信息</a></li>
						<li v-show="null != model.id"><a href="#book-chapter" data-toggle="tab"><i class="fa fa-list text-info-lt"></i>
								章节</a></li>
						<li class="dropdown" v-show="null != model.id">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog text-primary-lt"></i> 其他 <b class="caret"></b></a>
							<ul class="dropdown-menu text-left">
								<li>
									<router-link :to="'/book/'+ model.id" v-show="null != model.id"><i class="fa fa-eye text-success"></i> 预览</router-link>
								</li>
								<li><a href="#book-audio" data-toggle="tab"><i class="fa fa-audio-description text-info-dk"></i> 配音</a></li>
							</ul>
						</li>
					</ul>
				</header>
				<div class="panel-body">
					<div class="tab-content">
						<div class="tab-pane fade active in" id="book-info">
							<form class="form-horizontal" v-on:submit.prevent="onSubmit">
								<div class="form-group">
									<label class="col-sm-2 control-label">标题</label>
									<div class="col-sm-10">
										<input type="text" v-model.trim="model.title" class="form-control parsley-validated" required="true">
									</div>
								</div>
								<div class="line line-dashed b-b line-lg pull-in"></div>
								<div class="form-group">
									<label class="col-sm-2 control-label">作者</label>
									<div class="col-sm-10">
										<input type="text" v-model.trim="model.author" class="form-control parsley-validated" required="true">
									</div>
								</div>
								<div class="line line-dashed b-b line-lg pull-in"></div>
								<div class="form-group">
									<label class="col-sm-2 control-label">分类</label>
									<div class="col-sm-10">
										<select class="form-control" v-model="model.category">
											<option v-for="item in bookCategorys" v-bind:value="item.code" :key="item.code">
												{{ item.name }}
											</option>
											<option value="9999">其他</option>
										</select>
									</div>
								</div>
								<div class="line line-dashed b-b line-lg pull-in"></div>
								<div class="form-group">
									<label class="col-sm-2 control-label">创建时间</label>
									<div class="col-sm-10">
										<p class="form-control-static">{{ model.updateTime }}</p>
									</div>
								</div>
								<div class="line line-dashed b-b line-lg pull-in"></div>
								<div class="form-group">
									<label class="col-sm-2 control-label">发布</label>
									<div class="col-sm-10">
										<el-switch v-model="model.publish" active-color="#1AB667">
										</el-switch>
									</div>
								</div>
								<div class="line line-dashed b-b line-lg pull-in"></div>
								<div class="form-group">
									<label class="col-sm-2 control-label">海报</label>
									<div class="col-sm-10">
										<img v-if="model.poster" height="450" :src="$api.file.url.view + model.poster" alt="" class="r r-2x m-b-sm">
										<div>
											<a href="#image-upload" data-toggle="modal" class="btn btn-success">选择图片</a>
											<image-upload v-on:getPoster="getPoster"></image-upload>
										</div>

									</div>
								</div>
								<div class="line line-dashed b-b line-lg pull-in"></div>
								<div class="form-group">
									<label class="col-sm-2 control-label">简介</label>
									<div class="col-sm-10">
										<ckeditor :editor="editor" v-model="model.intr" :config="editorConfig"></ckeditor>
									</div>
								</div>
								<div class="line line-dashed b-b line-lg pull-in"></div>
								<div class="form-group">
									<div class="col-sm-10 col-sm-offset-2">
										<button type="submit" class="btn btn-success">提交</button>
									</div>
								</div>
							</form>
						</div>
						<div class="tab-pane fade text-sm" id="book-chapter">
							<div class="col-xs-12 col-sm-4 col-md-2 col-lg-2 bg-light">
								<h4>
									目录
									<a href="#" class="pull-right m-l-sm" @click="addChapter()"><i class="fa fa-plus-circle fa-lg text-success"></i></a>
									<a href="#" class="pull-right" @click="deleteChapter()"><i class="fa fa-minus-circle fa-lg text-danger"></i></a>
								</h4>
								<div id="div-content" class="scrollable list-group no-radius no-border no-bg" style="max-height: 350px;">
									<a href="#" v-bind:class="[{'active' : index==activeChapterIndex}, 'list-group-item']" v-for="(item, index) in chapters"
									 v-bind:key="item.num" @click="showContent(index)">
										<span v-show="index!=activeChapterIndex">{{ item.title }}</span>
										<input v-show="index==activeChapterIndex" type="text" class="form-control bg-info text-sm" v-model="item.title" />
									</a>
								</div>
							</div>
							<div class="col-xs-12 col-sm-8 col-md-10 col-lg-10">
								<section class="scrollable">
									<form class="form-horizontal" v-on:submit.prevent>
										<header class="panel-heading font-bold m-b-sm">
											正文：
											<a href="#" class="pull-right" v-show="null != model.id" title="刷新" @click="getChapters(); refreshing = true;">
												<i v-bind:class="[{'fa-spin' : refreshing}, 'fa icon-refresh i-lg text-info']"></i>
											</a>
										</header>
										<div class="form-group">
											<div class="col-sm-12">
												<ckeditor :editor="editor" v-if="chapters[activeChapterIndex] != null" v-model="chapters[activeChapterIndex].content"
												 :config="editorConfig"></ckeditor>
												<!-- <textarea class="form-control" rows="10" required="true" v-if="chapters[activeChapterIndex] != null"
													 v-model="chapters[activeChapterIndex].content"></textarea> -->
											</div>
										</div>
										<div class="line line-dashed b-b line-lg pull-in"></div>
										<div class="form-group">
											<div class="col-sm-12">
												<button type="submit" class="btn btn-success pull-right" @click="submitChapter()">提交</button>
											</div>
										</div>
									</form>
								</section>
							</div>
						</div>
						<div class="tab-pane fade" id="book-audio">
							<!-- side content -->
							<aside class="bg-gradient">
								<section class="w-f-md scrollable m-t-lg">
									<div class="form-group clearfix padder-md">
										<div class="input-group m-t m-b">
											<span class="input-group-btn">
												<button type="button" class="btn btn-sm bg-empty text-muted btn-icon" @click="queryAudio()">
													<i class="fa fa-search"></i>
												</button>
											</span>
											<input type="text" v-model="audio_q" @keyup.enter="queryAudio()" placeholder="查找" class="form-control input-sm text-black bg-empty b-b b-dark no-border">
										</div>
									</div>
									<ul class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
										<li class="list-group-item" v-for="item in audioList" v-bind:key="item.id">
											<div class="pull-right">
												<a href="#" class="m-l-sm" @click="addBookAudios(item)" title="添加"><i class="icon-plus i-lg"></i></a>
											</div>
											<a href="#" class="jp-play-me m-r-sm pull-left" @click="play(item)">
												<i class="icon-control-play text"></i>
												<v-musicbar class="text-active"></v-musicbar>
												<!-- <i class="icon-control-pause text-active"></i> -->
											</a>
											<div class="clear text-ellipsis">
												<span>{{ item.title }}</span>
												<span class="text-muted"> -- {{ item.author }}</span>
												<span class="text-muted"> -- {{ item.durationTime }}</span>
											</div>
										</li>
									</ul>
								</section>
							</aside>
							<!-- / side content -->
						</div>
					</div>
				</div>
			</section>
		</section>
		<btn-goback></btn-goback>
		<footer class="footer bg-black dker">
			<musicPlayer ref="musicPlayer" @remove="deleteBookAudios" :palyList='palyList'></musicPlayer>
		</footer>
	</section>
</template>

<script>
	import vMusicbar from '@/components/Musicbar'
	import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
	import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
	import {
		getTime
	} from '@/utils'

	var lazyTimer;

	export default {
		name: "bookForm",
		components: {
			vMusicbar
		},
		props: {
			id: {
				type: String,
				default: null
			},
		},
		data() {
			return {
				poster: '',
				bookCategorys: [],
				editor: ClassicEditor,
				editorConfig: {
					language: 'zh-cn'
				},
				model: {
					title: '',
					author: '',
					source: '1',
					updateTime: getTime(),
					publish: 1,
					intr: '',
					poster: ''
				},
				activeChapterIndex: -1,
				chapters: [{}],
				palyList: [],
				audio_q: '',
				audioList: [],
				refreshing: false
			}
		},
		mounted() {

			//初始化站点select
			this.$api.sysDict.queryDictItems("book_category").then(data => {
				this.bookCategorys = data;
			});

			//业务逻辑
			const params = this.$route.params;
			console.debug('params:', params);
			if (params.id != null && params.id != 0) {
				this.$api.book.queryById(params.id).then(data => {
					this.model = data;
					this.getChapters();
					this.getBookAudios();
				});
			}
		},
		methods: {
			onSubmit() {
				console.debug('model', this.model);
				if (this.model.id == null) {
					this.$api.book.add(this.model).then(data => {
						this.model.id = data.id;
						console.debug('model.id', data.id);
					});
				} else {
					this.$api.book.update(this.model);
				}
			},
			getChapters() {
				this.$api.bookChapter.queryByBookId(this.model.id).then(data => {
					this.chapters = data;

					if (this.activeChapterIndex != -1) {
						this.showContent(this.activeChapterIndex);
					}

					if (this.refreshing) {
						this.refreshing = false;
						this.$message({
							message: '刷新成功',
							type: 'success'
						});
					}
				});
			},
			showContent(index) {
				this.activeChapterIndex = index;
				// const content = this.chapters[this.activeChapterIndex].content;
				// this.contentEditor.setData(content == null ? '' : content);
			},
			addChapter() {
				this.chapters.push({
					bookId: this.id,
					tile: '',
					cntent: '',
					num: this.chapters.length + 1
				});
				this.activeChapterIndex = this.chapters.length - 1;

				clearTimeout(lazyTimer);
				lazyTimer = setTimeout(() => {
					var divContent = document.getElementById('div-content');
					divContent.scrollTop = divContent.scrollHeight + 50;
				}, 10);

			},
			deleteChapter() {
				if (this.activeChapterIndex == -1) {
					return;
				}
				const model = this.chapters[this.activeChapterIndex];
				this.chapters = this.chapters.filter(item => item.num != model.num);
				if (model.id != null) {
					this.$api.bookChapter.delete(model.id);
				}
			},
			submitChapter() {
				if (this.activeChapterIndex == -1) {
					return;
				}
				const model = this.chapters[this.activeChapterIndex];
				// model.content = this.contentEditor.getData();
				if (model.id == null) {
					model.bookId = this.model.id;
					this.$api.bookChapter.add(model).then(data => {
						model.id = data.id;
						console.debug('chapter.id', data.id);
					});
				} else {
					this.$api.bookChapter.update(model);
				}
			},
			getPoster(code) {
				this.model.poster = code;
			},
			getBookAudios() {
				this.$api.bookAudio.list({
					bookId: this.model.id
				}).then(data => {
					$.each(data, (i, item) => {
						this.$api.audio.queryById(item.audioId).then(data2 => {
							this.palyList.push({
								id: item.id,
								title: data2.title,
								artist: data2.author,
								mp3: data2.url,
								poster: data2.poster,
								durationTime: data2.durationTime
							});
						});
					});
				});
			},
			addBookAudios(item) {
				this.$api.bookAudio.add({
					bookId: this.model.id,
					audioId: item.id
				}).then(data => {
					this.palyList.push({
						id: data.id,
						title: item.title,
						artist: item.author,
						mp3: item.url,
						poster: item.poster
					});
					this.$message({
						message: '添加成功',
						type: 'success'
					});
				});
			},
			deleteBookAudios(index) {
				console.debug("deleteBookAudios index.id", this.palyList[index].id);
				this.$api.bookAudio.delete(this.palyList[index].id).then(data => {
					this.palyList.splice(index, 1);
				});
			},
			queryAudio() {
				this.$api.audio.query({
					title: this.audio_q,
					pageNo: 1,
					pageSize: 100
				}).then(data => {
					this.audioList = data.rows;
				});
			},
			play(item) {
				// this.$refs.musicPlayer.playTo(50);
				this.$refs.musicPlayer.setMedia({
					title: item.title,
					artist: item.author,
					mp3: item.url,
					poster: item.poster
				}, 20);

				// 				this.palyList = [{
				// 					title: item.title,
				// 					artist: item.author,
				// 					mp3: item.url,
				// 					poster: item.poster
				// 				}]
			}
		}

	}
</script>

<style>
	.ck.ck-editor__main {
		font-size: 1.1em;
		color: #545A5F;
	}
	
	.ck.ck-editor__main p a {
		color: #ea4444 !important;
	}
</style>
